<script setup lang="ts">
  import { usePermission } from '@/hooks/usePermission'
  import { ref, onMounted, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import FilterNavbar from '@/components/FilterNavbar'
  import { usePageDict, useSysDict } from '@/hooks/useDict'
  import useList from '@/hooks/useList'
  import OrderItem from './components/orderItem.vue'
  // import { getListApi } from '@/api/asset/car-maintenance'
  import { onBackPress } from '@dcloudio/uni-app'
  const dict = usePageDict('insureDict')
  // const sysDict = useSysDict(['equipment_brand', 'connection_mode'])
  const tabs = ['全部', '已生效', '待生效', '已失效', '已退保']

  // const { statusBarHeight } = uni.getSystemInfoSync()
  const list = ref(null)
  const isLoading = ref(false) // loading状态
  const isTriggered = ref(false) // 当前下拉刷新状态
  const modelValue = ref(false)

  const searchList = computed(() => {
    return [
      {
        prop: 'carSiteIdList',
        label: '车辆当前归属门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.carSiteIdList,
          },
        },
      },
      {
        prop: 'siteIdList',
        label: '保险单关联门店',
        type: 'remote-select',
        attrs: {
          type: 'site',
          multiple: true,
          params: {
            idList: queryParam.value.siteIdList,
          },
        },
      },
      {
        prop: 'insureKind',
        label: '投保类型',
        type: 'picker',
        attrs: {
          options: dict.insureKindList,
        },
      },
      {
        prop: 'supplierIdList',
        label: '保险公司',
        type: 'remote-select',
        attrs: {
          type: 'supplierInsure',
          multiple: true,
          params: {
            idList: queryParam.value.supplierIdList,
          },
        },
      },
      {
        prop: ['startDateStart', 'startDateEnd'],
        label: '保单开始日期 ',
        type: 'daterange-picker',
        attrs: {
          mode: 'date',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        prop: ['endDateStart', 'endDateEnd'],
        label: '保单结束日期',
        type: 'daterange-picker',
        attrs: {
          mode: 'date',
          valueFormat: 'YYYY-MM-DD',
        },
      },
      {
        prop: 'insureNoLike',
        label: '保险单号',
        type: 'input',
        placeholder: '保险单号/保单ID',
      },
    ]
  })
  const tabsChange = (e) => {
    var i = []
    if (e == 0) {
      i = []
    }
    if (e == 1) {
      i = [1]
    }
    if (e == 2) {
      i = [0]
    }
    if (e == 3) {
      i = [2]
    }
    if (e == 4) {
      i = [3]
    }
    queryParam.value.insureStatusList = i
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  }
  const searchBarSearch = (e) => {
    // searchBarSearch事件 自带搜索？
    queryParam.value.licenseNoLike = e
    queryParam.value.pageNumber = 1
    dataSource.value = []
    loadData()
  }
  const queryParam = ref({
    insureStatusList: [],
    licenseNo: undefined,
    pageSize: 10,
  })
  const { resetRefresh, reachBottom, loadData, scrollTop, loadStatus, refreshStatus, dataSource } = useList(
    '/V5/carInsurance/getPageList',
    queryParam,
  )
  const add = () => {
    modelValue.value = true
  }
  const close = () => {
    modelValue.value = false
  }
  const addInsure = (pageType, insure, insureId) => {
    modelValue.value = false
    uni.navigateTo({
      url: '/pages/asset/car-insure/form/index?pageType=' + pageType + '&insure=' + insure + '&insureId=' + insureId,
    })
  }
  const onFilterNavbarConfirm = (params: any) => {
    if (params.times) {
      queryParam.value.minQueryDate = params.times[0]
      queryParam.value.maxQueryDate = params.times[1]
    }
    queryParam.value = {
      ...queryParam.value,
      ...params,
    }
    resetRefresh()
  }
  onLoad(() => {
    uni.$on('loadData', () => {
      queryParam.value.pageNumber = 1
      dataSource.value = []
      loadData()
    })
  })
  onMounted(() => {
    loadData()
  })
  onBackPress((e) => {
    // return true
  })
</script>

<template>
  <ve-popup :model-value="modelValue" @close="close" mode="bottom" :maskClose="true">
    <view class="add-popup">
      <view class="tlt c1 fs36">请选择新增的投保类型</view>
      <ve-button class="button" size="default" @click="addInsure('add', 0)">交强险</ve-button>
      <ve-button class="button" size="default" @click="addInsure('add', 1)">商业险</ve-button>
    </view>
  </ve-popup>
  <view class="container">
    <FilterNavbar :searchList="searchList" v-model:queryParam="queryParam" @confirm="onFilterNavbarConfirm">
      <template #center>
        <view class="navbar-title"> 车辆保险 </view>
      </template>
    </FilterNavbar>
    <view class="page-filter">
      <ve-search-bar placeholder="请输入车牌号" @search="searchBarSearch"></ve-search-bar>
      <ve-tabs :actived="0" :list="tabs" @change="tabsChange"></ve-tabs>
    </view>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      refresher-enabled
      :refresher-triggered="refreshStatus"
      :enable-back-to-top="true"
      @refresherrefresh="resetRefresh(true)"
      @scrolltolower="reachBottom"
    >
      <view class="record-list">
        <OrderItem v-for="record in dataSource" :record="record" :key="record.id" />
        <!-- 加载结束列表为空时展示 -->
        <ve-empty v-if="dataSource.length == 0 && loadStatus == 'nomore'"></ve-empty>
        <!-- 底部加载状态 -->
        <ve-load-more v-else :status="loadStatus" bgColor="#F7F7F9"></ve-load-more>
      </view>
    </scroll-view>
    <ve-bottom-box v-if="usePermission('svmsapp:car-insure.add')">
      <ve-button type="primary" @click="add" style="width: 100%">新增车辆保险</ve-button>
    </ve-bottom-box>
  </view>
</template>

<style lang="scss" scoped>
  .add-popup {
    padding: 0 40rpx 64rpx;
    .tlt {
      margin: 48rpx 0;
      width: 100%;
      text-align: center;
    }
    .button {
      margin-bottom: 32rpx;
    }
  }
  .container {
    height: 100vh;
    background-color: rgba(247, 248, 250, 1);
  }
  page {
    background-color: rgba(247, 248, 250, 1);
    padding-bottom: 132rpx;
  }
  .record-list {
    padding: 24rpx 24rpx;
  }
  .manager-search {
    position: sticky;
    top: 44px;
    z-index: 999;
  }
  .manager-tabs {
    background-color: #fff;
  }
  .ve-bottom-box {
    height: auto;
  }
</style>
